<template>
	<view>
		
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back" @click="back()">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<view class="search">
				<image src="/static/fdj-home.png" mode=""></image>
				<!-- <input type="text" value="" placeholder="搜索景区" /> -->
				<view class="search-input" @click="toSearch">搜索景区</view>
			</view>
			<view class="search-btn" @click="search()">搜索</view>
		</view>
		<view class="list-area">
			<view class="item" v-for="(item,index) in listData" :key='index' @click="toItem()">
				<image :src="item.img" mode=""></image>
				<view class="item-right">
					<text class="item-title">{{item.title}}</text>
					<text class="item-des">{{item.des}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	export default{
		data(){
			return{
				searchText:'',
				statusBarHeight:global.statusBarHeight + 'px',
				listData:[
					{
						title:'莲鹤方壶',
						img:'/static/banner.png',
						url:'',
						des:'号称“方壶之王”，是此次赴京最贵重的文...'
					},
					{
						title:'汉白玉印花碗',
						img:'/static/banner.png',
						url:'',
						des:'号称“方壶之王”，是此次赴京最贵重的文...'
					}
				]
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toItem(){
				
			},
			search(){
				
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/scenicSpot/map/shenqiSearch'
				})
			}
		},
		components:{
			uniIcon
		}
	}
</script>

<style scoped>
	.head{
		width: 100%;
		height: auto;
		display: table;
		background: #FFFFFF;
		border-bottom: #DCDCDC solid 1upx;
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
	}
	.back{
		width: 88upx;
		height: 88upx;
		float: left;
	}
	.back image{
		width: 36upx;
		height: 36upx;
		margin: 26upx;
	}
	.search{
		width: 502upx;
		height: 56upx;
		border-radius: 30upx;
		background: #F5F5F5;
		float: left;
		margin-top: 20upx;
	}
	.search image{
		width: 28upx;
		height: 28upx;
		float: left;
		margin-top: 14upx;
		margin-left: 33upx;
	}
	.search-input{
		width: 250upx;
		height: 60upx;
		margin-left: 20upx;
		font-size: 28upx;
		float: left;
		line-height: 60upx;
	}
	.search-btn{
		width: 124upx;
		height: 50upx;
		border-radius: 30upx;
		text-align: center;
		line-height: 50upx;
		font-size: 28upx;
		margin-top: 22upx;
		color: #FFFFFF;
		float: left;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		margin-left: 12upx;
	}
	.list-area{
		width: 100%;
		height: auto;
		display: table;
	}
	.item{
		width: 706upx;
		float: right;
		height: 130upx;
		border-bottom: #EDEBEB solid 1upx;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item image{
		width: 83upx;
		height: 83upx;
		border-radius: 50%;
		float: left;
		margin-top: 32upx;
	}
	.item-right{
		width: 450upx;
		height: 130upx;
		float: left;
		margin-left: 30upx;
	}
	.item-title{
		font-size: 30upx;
		width: 100%;
		height: auto;
		display: table;
		margin-top: 35upx;
		
	}
	.item-des{
		font-size: 28upx;
		width: 100%;
		height: auto;
		display: block;
		white-space:nowrap;
		text-overflow:ellipsis;
		-webkit-text-overflow:ellipsis;
		overflow:hidden;
		color: #666666;
	}
</style>
